<template>
    <div class="upDate">
        <div class="item">
            <span>姓名:</span>
            <a-input class="mt-10" v-model:value="userName" placeholder="输入姓名" />
        </div>
        <div class="item">
            <span>电话:</span>
            <a-input class="mt-10" v-model:value="userPhone" placeholder="输入邮箱" />
        </div>
        <div class="btn">
            <a-button type="primary" @click="submit">打卡上班</a-button>
        </div>
    </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import { onMounted, ref } from '@vue/runtime-core'
import { message } from 'ant-design-vue'

export default defineComponent({
    setup() {
        onMounted(() => {
        })
        let userName = ref('xx')
        let userPhone = ref('xx')
        userName = JSON.parse(window.sessionStorage.getItem('userInfo')).userName
        userPhone = JSON.parse(window.sessionStorage.getItem('userInfo')).token

        let count = 0
        const submit = () => {
            count++
            if (count > 1) {
                message.error('你已经打过卡啦~~~')
                return
            }
            message.success('上班打卡成功')
        }
        return {
            userName,
            userPhone,
            submit
        }
    },
})
</script>

<style lang="scss" scoped>
.item, .btn {
    padding: 15px;
    box-sizing: border-box;
}
.item span {
    font-size: 16px;
    font-weight: bold;
}
.item ::v-deep .ant-input {
    height: 55px !important;
}
</style>
